<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hash和history原理</title>
</head>
<body>
  <p>hash</p>
  <a href="#/a">a页面</a>
  <a href="#/b">b页面</a>
<hr>
  <p>history</p>
  <a onclick="goA()">a页面</a>
  <a onclick="goB()">b页面</a>
  <div id="app"></div>
  <script>
    //hash
    let fn = function(){
      app.innerHTML = window.location.hash;
    };
    fn();
    window.addEventListener('hashchange',fn)

    //history
    let fn1 = function(){
      app.innerHTML = window.location.pathname;
    };
    function goA(){
      history.pushState({},null,'/a');
      fn1();
    }
    function goB(){
      history.pushState({},null,'/b');
      fn1();
    }
    //路由的信息变了都会执行这个方法，否则前进后退没有效果
    window.addEventListener('popstate',function(){
      fn1();
    })
  </script>
</body>
</html>